<template>
  <div class="scroll-y columnSS" style="gap: 10px;">
    <!--操作-->
    <div class="rowBS" style="width: 100%">
      <div>
        <el-button v-if="multipleSelection.length > 0" type="danger" @click="onClickBtnBatchDel">
          <el-icon>
            <Delete style="vertical-align: middle" />
          </el-icon>
          <span style="vertical-align: middle">删除</span>
        </el-button>
        <el-button plain type="primary" @click="getTableListData">
          <el-icon>
            <Refresh style="vertical-align: middle" />
          </el-icon>
          <span style="vertical-align: middle">刷新</span>
        </el-button>
      </div>
      <el-button type="primary" @click="onClickBtnAdd">
        <el-icon style="vertical-align: middle">
          <FolderAdd />
        </el-icon>
        <span style="vertical-align: middle">增加</span>
      </el-button>
    </div>
    <div class="rowSS" style="background-color: #e3e3e3; width: 100%; padding: 10px; gap: 10px;">
      <!--条件搜索-->
      <el-form ref="refSearchForm" :inline="true">
        <el-form-item style="margin: 0" label-width="50px" label="账号:" prop="account" label-position="left">
          <el-input v-model="searchForm.account" class="widthPx-150" placeholder="账号" />
        </el-form-item>
        <el-form-item style="margin: 0" label-width="50px" label="昵称:" prop="nickname" label-position="left">
          <el-input v-model="searchForm.nickname" class="widthPx-150" placeholder="昵称" />
        </el-form-item>
      </el-form>
      <!--查询按钮-->
      <el-button type="success" @click="searchBtnClick">查询</el-button>
    </div>
    <!--表格和分页-->
    <el-table
      id="resetElementDialog"
      ref="refTable"
      :height="`calc(100vh - ${settings.delWindowHeight})`"
      border
      :data="tableListData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="50" />
      <el-table-column align="center" prop="id" label="ID" width="80" />
      <el-table-column prop="account" label="账号" />
      <el-table-column prop="nickname" label="昵称" />
      <el-table-column label="角色">
        <template #default="{ row }">
          <el-tag
            v-for="role in row.roles"
            :key="role.slug"
            :type="buttons[role.id % 5].type"
            effect="dark"
            class="mx">
            {{ role.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createdAt" label="创建时间" width="110" />
      <el-table-column align="center" prop="updatedAt" label="更新时间" width="110" />
      <!--点击操作-->
      <el-table-column fixed="right" align="center" label="操作" width="220">
        <template #default="{ row }">
          <el-button :disabled="row.id === 1" text type="info" size="small" @click="onClickTableRowEdit(row)">
            编辑
          </el-button>
          <el-button :disabled="row.id === 1" text type="danger" size="small" @click="onClickTableRowDel(row)">删除
          </el-button>
          <el-button
            :disabled="row.id === 1"
            text
            bg
            type="warning"
            size="small"
            @click="onClickTableRowResetPassword(row)">
            重置密码
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block columnCC" style="width: 100%">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import { Delete, FolderAdd, Refresh } from "@element-plus/icons-vue"
import { useTable } from '@/hooks/use-table'
import { delUserReq, getUserReq, resetPasswordReq } from '@/api/setting'
import settings from "@/settings";
import router from "@/router"

onMounted(() => {
  getTableListData();
});

const buttons = [
  { type: "primary", text: "primary" },
  { type: "success", text: "success" },
  { type: "info", text: "info" },
  { type: "warning", text: "warning" },
  { type: "danger", text: "danger" }
];

const refTable = ref(null);
const searchForm = reactive({
  id: "",
  account: "",
  nickname: ""
});

const onClickBtnAdd = () => {
  router.push({ name: "UserCreate" });
};

const searchBtnClick = () => {
  pageNum.value = 1;
  getTableListData();
};

let getTableListData = () => {
  const data = Object.assign(searchForm, {
    page: pageNum.value,
    pageSize: pageSize.value
  });
  Object.keys(data).forEach((fItem) => {
    if (data[fItem] === "" || data[fItem] === null || data[fItem] === undefined) delete data[fItem];
  });
  getUserReq(data).then(res => {
    total.value = res.data.total
    tableListData.value = res.data.list
  });
};

let {
  pageNum,
  pageSize,
  total,
  tableListData,
  multipleSelection,
  handleSelectionChange,
  handleCurrentChange,
  handleSizeChange,
} = useTable(getTableListData)

const onClickTableRowEdit = (row) => {
  router.push({
    name: "UserCreate", params: {
      id: row.id,
      account: row.account,
      nickname: row.nickname,
      role: Number(row.roles[0]?.id)
    }
  });
};

const onClickTableRowResetPassword = (row) => {
  elConfirm("确定", `您确定要重置【${row.nickname}】的密码吗？`).then(() => {
    resetPasswordReq(row.id).then(() => {
      elMessage(`【${row.nickname}】删除成功`);
    });
  }).catch(() => {
  });
};

const onClickTableRowDel = (row) => {
  elConfirm("确定", `您确定要删除【${row.nickname}】吗？`).then(() => {
    delUserReq([row.id]).then(() => {
      getTableListData();
      elMessage(`【${row.nickname}】删除成功`);
    });
  }).catch(() => {
  });
};

const onClickBtnBatchDel = () => {
  // console.log(refTable.value.getSelectionRows());
  const names: string[] = [];
  const ids: number[] = [];
  multipleSelection.value.forEach(v => {
    names.push(v.nickname);
    ids.push(v.id);
  })
  elConfirm("确定", `您确定要删除【${names.join("、")}】吗？`).then(() => {
    delUserReq(ids).then(() => {
      getTableListData();
      elMessage(`【${names.join("、")}】删除成功`);
    });
  }).catch(() => {
  });
};
</script>
